<template>
  <div class="competitive">
    <div class="naviga">&nbsp;&nbsp;{{$store.state.marketName}}>&nbsp;竞争力评估</div>
    <div class="top-bar">
      <img src="../../images/wicon.png"/>
      <p>数据来源于<span>淘宝/天猫</span>平台</p>
      <p>开通精确数据服务</p>
    </div>
    <div class="second-bar">
      <div class=" margin-top1" style="width: 97.65%;margin: auto;background: #fff;">
       <div style="width: 75%;float: left">
          <span style="font-size: 14px;margin-left: 20px;float:left" >已选型号</span>
          <ul
          style="margin-left: 5px;float:left"
          v-for="item,index in tags1"
          :key="index"
          v-if="index<5"
          >
            <p :style="{background:item.color}">
              <span style="line-height:14px;padding:0 10px">{{item.brand}}</span><br/>
              <span style="line-height:14px;padding:0 10px">{{item.code}}</span>
            </p>
          </ul>
          <el-popover
            placement="bottom"
            width="400"
            trigger="click">
              <ul

                style="margin-left: 5px;float:left"
                v-for="item,index in tags2"
                :key="index"
                v-if='item'
                >
                <p :style="{background:item.color}" style="text-align:center;padding:5px;border-radius: 5px;">
                  <span style="line-height:14px;padding:0 5px">{{item.brand}}</span><br/>
                  <span style="line-height:14px;padding:0 5px">{{item.code}}</span>
                </p>
              </ul>
              <el-button slot="reference" style="margin-left:10px;background:none;border:none">更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
          </el-popover>
        </div>

        <div style="width: 20%;float: right;margin-right:1%">
          <div class="pull-right" style="width: 100%">
              <span class="demonstration" style="float: left;width: 30%;font-size: 14px;">选择日期</span>
              <ul class="data-month">
                  <el-date-picker :value="startMonth" type="month" @input="startChange"   placeholder="选择起始年月"></el-date-picker>
                  <span style="width:10%;">至</span>
                  <el-date-picker :value="endMonth" type="month" @input="endChange"  placeholder="选择结束年月"></el-date-picker>
                  <img style="width:16px;height:16px;margin-top:17px;"  src="../../images/clender.png"/>
              </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-12 border-r margin-top" style="background: #fff">
      <el-tabs type="border-card" @tab-click="tabChange" >
        <!--单个start-->
        <el-tab-pane label="用户关注点" >
          <div class="col-xs-12">
            <div class="col-xs-12" style="height: 440px;margin-bottom: 50px">
              <!-- <div  id="myChart"  style="height: 440px"></div> -->
            <chart v-if="carePoint!=0" :options="chartOption" :auto-resize="true"  style="height: 440px;width:100%"></chart>
             <h3 v-if="carePoint==0" style="width: 100%;height:440px;text-align:center;line-height:440px;font-size:14px">暂无数据</h3>
            </div>
              <!--表格start-->
               <div class="table-bottom" >
                 <!--表格表头start-->
                 <ul class="sec">
                   <p v-for='item,index in roleListStart'>{{item}}</p>
                 </ul>
                 <ul :class="`sec sec${index%2}`" v-for="cont,index in cont111" >
                  <p class="cont" v-for="n in cont" >{{!isNaN(n.ratio)?(n.ratio*100).toFixed(2)+'%':n.ratio}}</p>
                 </ul>
                 <!--表格表头end-->
               </div>
                <!--表格end-->
          </div>
        </el-tab-pane>
        <!--单个end-->
        <el-tab-pane label="竞品洞察">
          <div class="col-xs-12" style="padding: 0;">

            <!--柱状-->
            <div class="col-xs-12 bar">

              <div class="col-xs-12">
                <!-- <div id="myChartCloud" style="width:100%;height: 300px"></div> -->
                <chart v-if="cloudNum!=0" :options="cloudOption" :auto-resize="true"  style="width:100%;height: 300px"></chart>
                <!--圆环-->
                 <h3 v-if="cloudNum==0" style="width: 100%;height:300px;text-align:center;line-height:300px;font-size:14px">暂无数据</h3>
            <div v-if="cloudNum!=0" class="pie">
              <div v-for='item,index in seePieData' v-if="isShowisShow&&seePieData.length!=0" class="col-xs-3" style="height: 220px;display: flex;align-items: center">
               <aa :id='index' :pieSeeData='item' pie='myChartPie3' :key='index'></aa>
              </div>
            </div>
           <h3 v-if="cloudNum==0" style="width: 100%;height:220px;text-align:center;line-height:220px;font-size:14px">暂无数据</h3>
            <!--圆环-->
                  <!--表格start-->
               <div class="table-bottom" >
                 <!--表格表头start-->
                 <ul class="sec">
                   <p v-for='item,index in roleListStart'>{{item}}</p>
                 </ul>
                 <ul :class="`sec sec${index%2}`" v-for="cont,index in cont111" >
                  <p class="cont" v-for="n in cont" >{{!isNaN(n.ratio)?(n.ratio*100).toFixed(2)+'%':n.ratio}}</p>
                 </ul>
                 <!--表格表头end-->
               </div>
                <!--表格end-->
              </div>
            </div>
            <!--柱状-->
          </div>

        </el-tab-pane>
        <el-tab-pane label="卖点洞察"> <div class="col-xs-12" style="padding: 0">
          <!--圆环-->
            <div v-if="pieNum!=0" class="pie">
              <div v-for='item,index in salePieData' v-if="isShowisShow1&&salePieData.length!=0" class="col-xs-3" style="height: 220px;display: flex;align-items: center">
               <aa :id='index' :pieSaleData='item' pie='myChartPie4' :key='index'></aa>
              </div>
            </div>
             <h3 v-if="pieNum==0" style="width: 100%;height:220px;text-align:center;line-height:220px;font-size:14px">暂无数据</h3>
          <!--圆环-->
          <!--柱状-->
          <div class="col-xs-12 bar">
            <div class="col-xs-12">

               <!-- <div id="myChartPie" style="width:100%;height: 300px"></div> -->
                <chart v-if="pieNum!=0" :options="pieOption" :auto-resize="true"  style="width:100%;height: 300px"></chart>
                 <h3 v-if="pieNum==0" style="width: 100%;height:300px;text-align:center;line-height:300px;font-size:14px">暂无数据</h3>
            </div>
          </div>
          <!--柱状-->
        </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import aa from "./pieEcharts/a";
export default {
  components: {
    aa
  },
  data() {
    return {
      chartOption: {},
      cloudOption: {},
      pieOption: {},
      value: "",
      tags: [],
      isShowisShow: false,
      isShowisShow1: false,
      roleListStart: [],
      tableData: [
        {
          rank: "1",
          areaName: "四川",
          sales: "80",
          account: "50%"
        }
      ],
      myChart: {},
      myChartPie: {},
      myChartCloud: {},
      value8: "",
      options: [],
      startMonth: "",
      endMonth: "",
      careBot: [],
      zCare: [],
      fCare: [],
      seePieData: [],
      salePieData: [],
      salePieData1: [],
      cloudData: [],
      // tags1: [],
      tags2: [],
      colorArr: ["#ffe6ea", "#eae9fa", "#d8f3f7", "#fefbe2", "#e0f2fd"],
      label: "用户关注点",
      labelTabal: "用户关注点",
      cont111: [],
      carePoint: "",
      cloudNum: "",
      pieNum: ""
    };
  },
  computed: {
    tags1() {
      let dataTags1 = this.$store.state.brandArr;
      let objTags1 = {};
      for (var a in dataTags1) {
        let name = dataTags1[a].brand;
        objTags1[name] = { name };
        Object.keys(objTags1).map((key, i) => {
          console.log(key, i);
          if (dataTags1[a].brand == key) {
            dataTags1[a].color = this.colorArr[i];
          }
        });
      }
      this.tags2 = dataTags1.slice("5");
      return dataTags1;
    }
    // tags2(){

    // }
  },
  created() {
    let date = new Date();
    let mounth = date.getMonth() + 1;
    let year = date.getFullYear();
    this.endMonth = `${year}-${mounth}`;
    this.startMonth = this.getPreMonth(this.endMonth);
    //
    this.getCare(() => {
      this.drawBar();
    });
    this.getRoleList(this.label);
  },
  methods: {
    //改变开始年月
    startChange(e) {
      let t = e.getFullYear() + "-" + (e.getMonth() + 1);
      let data = new Date(e).getTime();
      let endData = new Date(this.endMonth).getTime();
      console.log(data, endData, data - endData);
      if (data > endData) {
        this.$message({
          message: "开始时间不能大于结束日期",
          type: "warning"
        });
        return;
      }
      this.startMonth = t;
      if (this.label == "用户关注点") {
        this.getCare(() => {
          this.drawBar();
        });
        this.getRoleList(this.labelTabal);
      } else if (this.label == "竞品洞察") {
        this.getSeePie(() => {
          this.drawPie();
          this.drawCloud();
        });
        this.getRoleList(this.labelTabal);
      } else if (this.label == "卖点洞察") {
        this.getSalePie(() => {
          this.drawPie();
        });
      }
    },
    //改变结束年月
    endChange(e) {
      console.log(this.label);
      let t = e.getFullYear() + "-" + (e.getMonth() + 1);
      let data = new Date(e);
      let startData = new Date(this.startMonth);
      if (data < startData) {
        this.$message({
          message: "结束时间不能小于开始时间",
          type: "warning"
        });
        return;
      }
      this.endMonth = t;
      if (this.label == "用户关注点") {
        this.getCare(() => {
          this.drawBar();
        });
        this.getRoleList(this.labelTabal);
      } else if (this.label == "竞品洞察") {
        this.getSeePie(() => {
          this.drawPie();
          this.drawCloud();
        });
        this.getRoleList(this.labelTabal);
      } else if (this.label == "卖点洞察") {
        this.getSalePie(() => {
          this.drawPie();
        });
      }
    },
    //获取最近一个月的时间段
    getPreMonth(date) {
      console.log();
      var arr = date.split("-");
      var year = arr[0]; //获取当前日期的年份
      var month = arr[1]; //获取当前日期的月份
      var day = arr[2]; //获取当前日期的日
      var days = new Date(year, month, 0);
      days = days.getDate(); //获取当前日期中月的天数
      var year2 = year;
      var month2 = parseInt(month) - 1;
      if (month2 == 0) {
        year2 = parseInt(year2) - 1;
        month2 = 12;
      }
      var t2 = year2 + "-" + month2;
      return t2;
    },
    tabChange(e) {
      this.label = e.label;
      if (e.label == "用户关注点") {
        this.labelTabal = "用户关注点";
        this.isShowisShow = false;
        this.isShowisShow1 = false;
        let date = new Date();
        let mounth = date.getMonth() + 1;
        let year = date.getFullYear();
        this.endMonth = `${year}-${mounth}`;
        this.startMonth = this.getPreMonth(this.endMonth);
        this.getCare(() => {
          this.drawBar();
        });
        this.getRoleList(this.labelTabal);
      } else if (e.label == "竞品洞察") {
        this.labelTabal = "产品优势";
        this.isShowisShow = true;
        this.isShowisShow1 = false;
        this.isShowisShow2 = false;
        let date = new Date();
        let mounth = date.getMonth() + 1;
        let year = date.getFullYear();
        this.endMonth = `${year}-${mounth}`;
        this.startMonth = this.getPreMonth(this.endMonth);
        this.getSeePie(() => {
          this.drawPie();
          this.drawCloud();
        });
        this.getRoleList(this.labelTabal);
      } else if (e.label == "卖点洞察") {
        this.isShowisShow = false;
        this.isShowisShow1 = true;
        this.isShowisShow2 = false;
        let date = new Date();
        let mounth = date.getMonth() + 1;
        let year = date.getFullYear();
        this.endMonth = `${year}-${mounth}`;
        this.startMonth = this.getPreMonth(this.endMonth);
        this.getSalePie(() => {
          this.drawPie();
        });
      }
    },
    drawBar() {
      // 绘制图表

      this.chartOption = {
        color: ["#fd859a", "#9cb7c4"],
        tooltip: {
          trigger: "axis",
          formatter: function(params) {
            console.log(params);
            let html = "";
            html += params[0].name + "</br>";
            for (let i in params) {
              html +=
                params[i].marker +
                params[i].seriesName +
                ":" +
                Math.abs(params[i].value) +
                "</br>";
            }
            return html;
          },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ["正面", "负面"],
          right: "20"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",

          containLabel: true
        },
        xAxis: [
          {
            type: "value",
            max: 100,
            min: -100,
            axisLabel: {
              formatter: function(params) {
                return Math.abs(params);
              }
            }
          }
        ],
        yAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: this.careBot
          }
        ],
        series: [
          {
            name: "正面",
            type: "bar",
            barWidth: 20,

            stack: "总量",
            label: {
              normal: {
                show: true
              }
            },
            data: this.zCare
          },
          {
            name: "负面",
            type: "bar",
            barMaxWidth: 20,
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "left",
                formatter: function(params) {
                  return params.data * -1;
                }
              }
            },
            data: this.fCare
          }
        ]
      };
    },
    drawPie() {
      this.pieOption = {
        // color: [
        //   "#f4e65c",
        //   "#fd859a",
        //   "#64bef5",
        //   "#9c96e7",
        //   "#3fcce1",
        //   "#50d38a"
        // ],
        tooltip: {
          trigger: "item"
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "80%",
            center: ["50%", "50%"],
            data: this.salePieData1,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
    },
    drawCloud() {
      this.cloudOption = {
        backgroundColor: "#fff",
        tooltip: {
          show: false
        },
        series: [
          {
            type: "wordCloud",
            gridSize: 1,
            sizeRange: [30, 60],
            rotationRange: [0, 0],
            textStyle: {
              normal: {
                color: function(params) {
                  // Random color
                  return (
                    "rgb(" +
                    [
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160)
                    ].join(",") +
                    ")"
                  );
                },
                backgroundColor: "#fff"
              }
            },
            left: "center",
            top: "center",
            right: null,
            bottom: null,
            data: this.cloudData
          }
        ]
      };
    },
    tableBot(row) {
      if (row.rowIndex % 2 == 0) {
        return "bottomBak";
      }
    },
    //获取用户关注点正负面图表数据
    getCare(callback) {
      this.$http
        .post(this.GLOBAL.host, {
          method: "getUserdecisionData",
          query: {
            marketId: this.$store.state.id,
            concern: "用户关注点",
            startTime: this.startMonth,
            endTime: this.endMonth
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            let carePoint1 = Object.keys(res.data.data).length;
            this.carePoint = carePoint1;
            if (carePoint1 == 0) {
              return;
            }
            let data = res.data.data;
            let careBot = [];
            let zCare = [];
            let fCare = [];
            console.log(data);
            for (let i in data) {
              careBot.push(i);
              for (let a in data[i]) {
                console.log(data[i].length);
                if (data[i].length == 2) {
                  if (data[i][a].emotion == "正面") {
                    zCare.push(data[i][a].num);
                  } else if (data[i][a].emotion == "负面") {
                    fCare.push(-data[i][a].num);
                  }
                } else if (data[i].length == 0) {
                  zCare.push('');
                  fCare.push('');
                } else if (data[i].length == 1) {
                  if (data[i][a].emotion == "正面") {
                    zCare.push(data[i][a].num);
                    fCare.push('');
                  } else {
                    fCare.push(-data[i][a].num);
                    zCare.push('');
                  }
                }
              }
            }
            console.log(careBot);
            this.careBot = careBot;
            this.zCare = zCare;
            this.fCare = fCare;
            callback();
          }
        })
        .catch(error => {});
    },
    //获取竞品洞察pie图数据
    getSeePie(callback) {
      this.$http
        .post(this.GLOBAL.host, {
          method: "getUserdecisionData",
          query: {
            marketId: this.$store.state.id,
            concern: "竞品洞察",
            startTime: this.startMonth,
            endTime: this.endMonth
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            let col = Object.keys(res.data.data).length;
            this.cloudNum = col;
            if (col == 0) {
              return;
            }
            let data = res.data.data;
            let arr = [];
            let arr1 = [];
            for (let i in data) {
              for (let a in data[i]) {
                if (data[i][a].emotion == "正面") {
                  arr.push(data[i][a]);
                  arr1.push({
                    value: data[i][a].num,
                    name: data[i][a].description
                  });
                }
              }
            }
            this.seePieData = arr;
            this.cloudData = arr1;
            console.log(arr1);
            console.log("sfa", this.cloudData);
            callback();
          }
        })
        .catch(error => {});
    },
    //获取卖点洞察pie图数据
    getSalePie(callback) {
      this.$http
        .post(this.GLOBAL.host, {
          method: "getUserdecisionData",
          query: {
            marketId: this.$store.state.id,
            concern: "卖点洞察",
            startTime: this.startMonth,
            endTime: this.endMonth
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            let pieNum1 = Object.keys(res.data.data).length;
            this.pieNum = pieNum1;
            if (pieNum1 == 0) {
              return;
            }
            let data = res.data.data;
            let arr = [];
            let arr1 = [];
            for (let i in data) {
              for (let a in data[i]) {
                if (data[i][a].emotion == "产品数") {
                  arr.push(data[i][a]);
                  arr1.push({
                    name: data[i][a].description,
                    value: data[i][a].num
                  });
                }
              }
            }
            this.salePieData = arr;
            this.salePieData1 = arr1;
            callback();
          }
        })
        .catch(error => {});
    },
    //获取角色管理下的技术分布列表
    getRoleList(e) {
      this.$http
        .post(this.GLOBAL.host, {
          method: "getUserdecisionRatioData",
          query: {
            marketId: this.$store.state.id,
            concern: this.label,
            startTime: this.startMonth,
            endTime: this.endMonth
          }
        })

        .then(res => {
          if (res.data.code == 200) {
            this.roleListStart = res.data.data.label;
            let arr = [];
            this.totalTechPage = res.data.data.total;
           if(Object.keys(res.data.data.ratios).length==0){
             this.cont111=[]
             return
           }
            let arr111 = [];
            let abc = res.data.data.ratios;
            for (let i in abc) {
              let arr11 = [];
              let label = res.data.data.label;
              let c1 = abc[i];
              c1.unshift({
                ratio: i,
                brandName: e
              });
              for (let a in label) {
                let c2 = c1.find(x => x.brandName == label[a]);
                if (c2) {
                  arr11.push(c2);
                } else {
                  arr11.push({
                    norm: "",
                    technology: "",
                    count: "",
                    ratio: "",
                    brandName: "",
                    dateTime: ""
                  });
                }
              }
              arr111.push(arr11);
              this.cont111 = arr111;
            }
          }
        })
        .catch(error => {});
    }
  }
};
</script>
<style lang="less">
.competitive {
  .el-tabs__content {
    background: #fff !important;
  }
  .naviga {
    width: 100%;
    height: 35px;
    line-height: 35px;
    padding-left: 5px;
    background-color: white;
    font-size: 14px;
    border-bottom: 2px solid #e3e3e3;
  }
  .table-bottom {
    width: 100%;
    //overflow-x: scroll;
    margin-bottom: 20px;
    .sec {
      display: flex;
      border: 1px solid #eee;
      height: 40px;
      // width: 1500px;
      > p {
        text-align: center;
        width: 14.3%;
        line-height: 40px;
        border-right: 1px solid #eee;
        margin-bottom: 0;
      }
    }
    > .sec:nth-child(1) {
      background: -webkit-linear-gradient(bottom, #e1eff7 0%, #fcfefe 100%);
    }
    > .sec1 {
      background: #eff7fc;
    }
  }
  .margin-top1 {
    width: 97.65%;
    margin: auto;
    background: #fff;
    > div:nth-child(1) {
      > span {
        line-height: 70px;
      }
      > ul {
        margin-top: 12px;
        border: 5px;
      }

      p {
        text-align: center;
        margin: 0;
        font-size: 12px;
        color: #4d4d4d;
        border-radius: 5px;
        padding: 5px 0;
      }
    }
  }
  .pull-right {
    display: flex;
    margin-top: 10px;
    > span {
      line-height: 50px;
    }
    .data-month {
      width: 75%;
      border: 1px solid #cccccc;
      display: flex;
      padding-left: 10px;
      height: 50px;
      padding-left: 0;
      > span {
        line-height: 50px;
      }
      .el-input {
        width: 40%;
        border: none;
        margin-top: 5px;
        .el-input__inner {
          padding: 0;
          text-align: center;
          border: none;
          cursor: pointer;
        }
        .el-input__icon {
          display: none;
        }
      }
    }
  }
  .margin-top {
    padding: 0;
    background: #fff;
  }
  .pie {
    height: 320px;
    background: #ffffff;
  }
  .bar {
    background: #ffffff;
    position: relative;
    .el-button-group {
      position: absolute;
      left: 20px;
      top: 20px;
    }
  }
  .el-tabs__content {
    padding: 0;
    background: #f6f6f6;
  }
  .top-bar {
    font-size: 14px;
    display: flex;
    align-items: center;

    > img {
      width: 18px;
      height: 18px;
      margin: 0 10px 0 20px;
      vertical-align: center;
    }
    > p:nth-child(2) {
      > span {
        color: #ffc323;
      }
      line-height: 40px;
      margin: 0;
    }
    > p:nth-child(3) {
      padding: 10px;
      margin: 10px 20px;
      background: -o-linear-gradient(left, #3fcce1, #03a9f4);
      background: -moz-linear-gradient(left, #3fcce1, #03a9f4);
      background: -ms-linear-gradient(left, #3fcce1, #03a9f4);
      background: linear-gradient(left, #3fcce1, #03a9f4);
      border-radius: 6px;
      color: #fff;
    }
  }
  .second-bar {
    height: 80px;
    background: #f6f6f6;
    display: flex;
    align-items: center;
  }
  .aaa {
    .el-input__inner {
      border: none;
    }
  }
  .first {
    background: #ffe7eb;
  }
  .second {
    background: #e0f2fd;
  }
  .three {
    background: #dcf6e8;
  }
  .bottomBak {
    background: #e1eff7;
  }
  .priceAnalysis {
    position: absolute;
    left: 20px;
    top: 20px;
    > p {
      float: left;
      border: 1px solid #eeeeee;
      padding: 5px 10px;

    }
  }
}
</style>

